<template>
  <div>
    <content-panel
      ref="contentRef"
      title="登录日志"
      :ops="{delete: 'logs:loginlog:delete', remove: 'logs:loginlog:remove', export: 'logs:loginlog:export'}"
      search-label-width="55px"
      :search-props="searchProps"
      :table-props="tableProps"
      list-api="getLoginLogs"
      get-api="getLoginLog"
      delete-api="deleteLoginLog"
      :import-and-export="{ exportUrl: '/logs/loginLog/export' }"
    >
      <template #top>
        <div style="height: 200px">
          <line-chart
            ref="lineChartRef"
            lazy
            height="100%"
            :colors="['#006fff', '#ff0006']"
            :legend-names="['成功', '失败']"
            :y-max="5"
          />
        </div>
      </template>
      <template #ops>
        <el-col :span="1.5">
          <el-button
            v-hasPerm="['logs:operlog:delete']"
            type="danger"
            plain
            size="small"
            @click="handleClean"
          >
            <template #icon>
              <Delete />
            </template>
            清空
          </el-button>
        </el-col>
      </template>
      <template #operate="scope">
        <el-button
          v-has-perm="['logs:oplog:query']"
          size="small"
          type="primary"
          link
          @click="handleView(scope.row,scope.index)"
        >
          <template #icon>
            <View />
          </template>
          详细
        </el-button>
      </template>
    </content-panel>

    <el-drawer
      v-model="open"
      :title="form.msg"
    >
      <div class="request-info">
        <div class="window-dots">
          <div class="dot dot-red" />
          <div class="dot dot-yellow" />
          <div class="dot dot-green" />
        </div>

        <el-descriptions :column="1">
          <el-descriptions-item label="登录用户ID:">{{ form.id }}</el-descriptions-item>
          <el-descriptions-item label="用户名称:">{{ form.userName }}</el-descriptions-item>
          <el-descriptions-item label="IP地址:">{{ form.loginIp }}</el-descriptions-item>
          <el-descriptions-item label="登录地点:">{{ form.loginLocation }}</el-descriptions-item>
          <el-descriptions-item label="浏览器类型:">{{ form.browser }}</el-descriptions-item>
          <el-descriptions-item label="操作系统:">{{ form.os }}</el-descriptions-item>
          <el-descriptions-item label="登录状态:">
            {{ form.status }}
          </el-descriptions-item>
          <el-descriptions-item label="访问时间:">{{ form.loginTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { Delete, View } from "@element-plus/icons-vue"
import moment from 'moment'

const contentRef = ref(null)

const lineChartRef = ref(null)
const open = ref(false)
const form = ref({})

const tableProps = [
  {label: '访问编号', prop: 'id'},
  {label: '登录用户ID', prop: 'userId'},
  {label: '用户名称', prop: 'userName'},
  {label: '登陆地址', prop: 'loginIp'},
  {label: '登陆地点', prop: 'loginLocation'},
  {label: '浏览器', prop: 'browser'},
  {label: '操作系统', prop: 'os'},
  {label: '登录状态', prop: 'status'},
  {label: '操作信息', prop: 'msg'},
  {label: '登陆日期', prop: 'loginTime', width: '140px'},
  {label: '操作', prop: 'operate', type: 'operate'}
]

const statusOptions = [{label: '成功', value: '成功'}, {label: '失败', value: '失败'}]

const searchProps = ref([
  {label: '登陆地址', prop: 'loginIp', type: 'input', labelWidth: 5, width: 10},
  {label: '登陆地点', prop: 'loginLocation', type: 'input', labelWidth: 5, width: 10},
  {label: '用户名称', prop: 'userName', type: 'input', labelWidth: 5, width: 10},
  {label: '状态', prop: 'status', type: 'select', options: statusOptions, labelWidth: 3, width: 10},
  {label: '登陆时间', prop: 'loginTime', type: 'date', labelWidth: 5, width: 12}
])

/** 清空按钮操作 */
const handleClean = () => {
  $xl.modal.confirm('是否确认清空所有登录日志数据项？').then(() => {
    $xl.apis.cleanLoginLog().then(() => {
      contentRef.value.getList()
      $xl.modal.msgSuccess('清空成功')
    })
  })
}

const getDateList = (days) => {
  return Array.from({length: days}, (_, i) => i)
      .map(day => moment().subtract(day, 'days').format('YYYY-MM-DD'))
      .reverse()
}

onMounted(() => {
  $xl.apis.getLoginLogsStatistic({
    params: {
      days: 30
    }
  }).then(res => {
    const dataMap = res.data.reduce((map, item) => {
      map[item.date] = item
      return map
    }, {})
    const dateList = getDateList(30)
    lineChartRef.value?.loadChart({
      xAxisNames: dateList.map(date => date.slice(5)),
      chartData: [
        dateList.map(date => dataMap[date]?.successCount || 0),
        dateList.map(date => dataMap[date]?.failCount || 0)
      ]
    })
  })
})

// 查看详情
const handleView = (row) => {
  open.value = true
  form.value = row
}
</script>


<style lang="scss" scoped>
.request-info {
  min-height: 600px;
  background-color: #1e2329;
  border-radius: 8px;
  padding: 20px;
  color: #e8e9ea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.window-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red {
  background-color: #ff5f56;
}

.dot-yellow {
  background-color: #ffbd2e;
}

.dot-green {
  background-color: #27c93f;
}

/* 自定义 el-descriptions 样式 */
:deep(.el-descriptions) {
  --el-bg-color: #2a2f36;
  --el-text-color-regular: #e8e9ea;
  --el-border-color: #3a3f4b;
}

:deep(.el-descriptions__label) {
  font-size: 18px;
  color: #49DE80 !important;
}

:deep(.el-descriptions__table) {
  margin-top: 30px !important;
}

:deep(.el-descriptions__cell) {
  line-height: 36px !important;
  background-color: #1e2329 !important;
}

:deep(.el-descriptions__content) {
  font-size: 18px;
}

</style>
